import React, { PureComponent, } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import {
  Row, Col, Card, Form, Input, Tabs, Spin, Icon, Button, Modal, message, Table, Tag, DatePicker, InputNumber, Popconfirm,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './OrderDetail.less';
import TextArea from 'antd/lib/input/TextArea';
import moment from 'moment';

const { TabPane } = Tabs;
const FormItem = Form.Item;

@connect(({ order, loading }) => ({
  order,
  baseInfo: order.baseInfo,
  tradeInfo: order.tradeInfo,
  sendOutGoodsInfo: order.sendOutGoodsInfo,
  refundsInfo: order.refundsInfo,
  loading: loading.models.order,
}))

@Form.create()
export default class OrderDetail extends PureComponent {
  state = {
    buttonStatus: 0,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    console.log(this.props.match.params.ordersId)
    dispatch({
      type: 'order/fetchOrderDetail',
      payload: { ordersId: this.props.match.params.ordersId },
    });
  }

  _callback() {
    this.setState({
      buttonStatus: 0
    })
    this.props.dispatch({
      type: 'order/fetchOrderDetail',
      payload: { ordersId: this.props.match.params.ordersId },
    });
  }

  _cancel() {
    this.setState({ buttonStatus: 0 })
  }

  _closeOrder() {
    console.log('关闭订单提交的数据-------', this.props.form.getFieldsValue())
    let values = { ...this.props.form.getFieldsValue(), ordersSts: 6 }
    this.props.dispatch({
      type: 'order/closeOrder',
      payload: values,
      callback: () => this._callback()
    });
  }

  _save() {
    if (this.state.buttonStatus == "1") {
      this._closeOrder();
    }
    if (this.state.buttonStatus == "2") {
      this.props.dispatch({
        type: 'order/sendOrder',
        payload: this.props.form.getFieldsValue(),
        callback: () => this._callback()
      });
    }
    if (this.state.buttonStatus == "3") {
      this.props.dispatch({
        type: 'order/refundOrder',
        payload: { ...this.props.form.getFieldsValue(), ordersSts: 4 },
        callback: () => this._callback()
      });
    }
    if (this.state.buttonStatus == "4") {
      this.props.dispatch({
        type: 'order/refundOrder',
        payload: { ...this.props.form.getFieldsValue(), ordersSts: 5 },
        callback: () => this._callback()
      });
    }

  }

  render() {
    const { baseInfo, tradeInfo, sendOutGoodsInfo, refundsInfo } = this.props;

    return (
      <Form>
        <PageHeaderLayout title="订单详情">
          <Card>
            <Button icon="left" type="primary" onClick={() => { this.props.dispatch(routerRedux.goBack()) }} >返回</Button>
          </Card>

          {this.props.loading ?
            <Spin /> :
            <div>
              <Card title="基本信息">
                <div className={styles.table}>
                  <div className={styles.row}>
                    <div className={styles.item}>
                      <div className={styles.label}>订单号</div>
                      {this.props.form.getFieldDecorator('ordersId', {
                        rules: [{ required: true, message: '请输入运费' }],
                        initialValue: baseInfo ? baseInfo.ordersId : null,
                      })(
                        <div className={styles.valueStyle}>{baseInfo ? baseInfo.ordersId : null}</div>
                      )}
                    </div>
                    <div className={styles.item}>
                      <div className={styles.label}>收货人</div>
                      <div className={styles.valueStyle}>{baseInfo ? baseInfo.receiverName : null}</div>
                    </div>
                  </div>

                  <div className={styles.row}>
                    <div className={styles.item}>
                      <div className={styles.label}>订单状态</div>
                      <div className={styles.valueStyle}>{baseInfo ?
                        baseInfo.ordersSts == "0" ? "待支付" :
                          baseInfo.ordersSts == "1" ? "已支付" :
                            baseInfo.ordersSts == "2" ? "交易成功" :
                              baseInfo.ordersSts == "3" ? "用户已取消" :
                                baseInfo.ordersSts == "4" ? "退款中" :
                                  baseInfo.ordersSts == "5" ? "已退款" :
                                    baseInfo.ordersSts == "6" ? "交易关闭" :
                                      baseInfo.ordersSts == "7" ? "已退货"
                                        : null : null
                      }
                      </div>
                    </div>
                    <div className={styles.item}>
                      <div className={styles.label}>收货人手机号</div>
                      <div className={styles.valueStyle}>{baseInfo ? baseInfo.receiverPhone : null}</div>
                    </div>
                  </div>

                  <div className={styles.row}>
                    <div className={styles.item}>
                      <div className={styles.label}>下单时间</div>
                      <div className={styles.valueStyle}>{baseInfo ? baseInfo.createTime : null}</div>
                    </div>
                    <div className={styles.item}>
                      <div className={styles.label}>收货地址</div>
                      <div className={styles.valueStyle}>{baseInfo ? baseInfo.receiverAddress : null}</div>
                    </div>
                  </div>

                  <div className={styles.row}>
                    <div className={styles.item}>
                      <div className={styles.label}>订单类型</div>
                      <div className={styles.valueStyle}>{baseInfo ? baseInfo.ordersType == "0" ? '课程' : baseInfo.ordersType == "1" ? '绘本' : baseInfo.loginType == "2" ? '积分' : '其他' : null}</div>
                    </div>
                    <div className={styles.item}>
                      <div className={styles.label}>M码</div>
                      <div className={styles.valueStyle}>{baseInfo ? baseInfo.mCode : null}</div>
                    </div>
                  </div>

                  <div className={styles.row}>
                    <div className={styles.item}>
                      <div className={styles.label}>订单金额</div>
                      <div className={styles.valueStyle}>{baseInfo ? baseInfo.payCash : null}</div>
                    </div>
                    <div className={styles.item}>
                      <div className={styles.label}>会员手机号</div>
                      <div className={styles.valueStyle}>{baseInfo ? baseInfo.userPhone : null}</div>
                    </div>
                  </div>
                </div>
              </Card>
              <Card title="交易信息">
                <div className={styles.table}>
                  <div className={styles.row}>
                    <div className={styles.item}>
                      <div className={styles.label}>商品名称</div>
                      <div className={styles.valueStyle}>{tradeInfo ? tradeInfo.goodsName : null}</div>
                    </div>
                    <div className={styles.item}>
                      <div className={styles.label}>单价</div>
                      <div className={styles.valueStyle}>{tradeInfo ? tradeInfo.unitPrice : null}</div>
                    </div>
                  </div>

                  <div className={styles.row}>
                    <div className={styles.item}>
                      <div className={styles.label}>购买数量</div>
                      <div className={styles.valueStyle}>{tradeInfo ? tradeInfo.goodsCnt : null}</div>
                    </div>
                    <div className={styles.item}>
                      <div className={styles.label}>优惠价</div>
                      <div className={styles.valueStyle}>{tradeInfo ? tradeInfo.reducedPrice : null}</div>
                    </div>
                  </div>

                  <div className={styles.row}>
                    <div className={styles.item}>
                      <div className={styles.label}>加盟商</div>
                      <div className={styles.valueStyle}>{tradeInfo ? tradeInfo.franName : null}</div>
                    </div>
                    <div className={styles.item}>
                      <div className={styles.label}>积分抵扣</div>
                      <div className={styles.valueStyle}>{tradeInfo ? tradeInfo.scorePrice : null}</div>
                    </div>
                  </div>

                  <div className={styles.row}>
                    <div className={styles.item}>
                      <div className={styles.label}>支付时间</div>
                      <div className={styles.valueStyle}>{tradeInfo ? tradeInfo.createTime : null}</div>
                    </div>
                    <div className={styles.item}>
                      <div className={styles.label}>支付金额</div>
                      <div className={styles.valueStyle}>{tradeInfo ? tradeInfo.payCash : null}</div>
                    </div>
                  </div>


                </div>
              </Card>

              <Card title="发货信息">
                <div className={styles.table}>
                  <div className={styles.row}>
                    <div className={styles.item}>
                      <div className={styles.label}>快递公司</div>
                      {this.state.buttonStatus == 2 ?
                        (this.props.form.getFieldDecorator('expressName', {
                          rules: [{ required: true, message: '快递公司不能为空且不能有特殊字符',pattern: /^[A-Za-z0-9\u4e00-\u9fa5]*$/ }],
                          initialValue: sendOutGoodsInfo ? sendOutGoodsInfo.expressName : null,
                        })(
                          <Input maxLength="8" placeholder="请输入快递公司" style={{ width: '77.7777%' }} />
                        )) :
                        <div className={styles.valueStyle}>{sendOutGoodsInfo ? sendOutGoodsInfo.expressName : null}</div>
                      }

                    </div>
                    <div className={styles.item}>
                      <div className={styles.label}>快递单号</div>

                      {this.state.buttonStatus == 2 ?
                        (this.props.form.getFieldDecorator('expressCode', {
                          rules: [{ required: true, message: '快递单号不能为空且不能包含特殊字符',pattern: /^[A-Za-z0-9\u4e00-\u9fa5]*$/ }],
                          initialValue: sendOutGoodsInfo ? sendOutGoodsInfo.expressCode : null,
                        })(
                          <Input maxLength="16" placeholder="请输入快递单号" style={{ width: '77.7777%' }} />
                        )) :
                        <div className={styles.valueStyle}>{sendOutGoodsInfo ? sendOutGoodsInfo.expressCode : null}</div>
                      }

                    </div>
                  </div>

                  <div className={styles.row}>
                    <div className={styles.item}>
                      <div className={styles.label}>运费</div>

                      {this.state.buttonStatus == 2 ?
                        (this.props.form.getFieldDecorator('frghtChg', {
                          rules: [{ required: true, message: '请输入运费' }],
                          initialValue: sendOutGoodsInfo ? sendOutGoodsInfo.frghtChg : null,
                        })(
                          <InputNumber min={0} placeholder="请输入运费" style={{ width: '77.7777%' }} />
                        )) :
                        <div className={styles.valueStyle}>{sendOutGoodsInfo ? sendOutGoodsInfo.frghtChg : null}</div>
                      }
                    </div>
                    <div className={styles.item}>
                      <div className={styles.label}></div>
                      <div className={styles.valueStyle}>{}</div>
                    </div>
                  </div>
                </div>
              </Card>

              <Card title="退货退款信息">
                <div className={styles.table}>
                  <div className={styles.row}>
                    <div className={styles.item}>
                      <div className={styles.label}>订单状态</div>
                      <div className={styles.valueStyle}>{refundsInfo ?
                        refundsInfo.ordersSts == "0" ? "待支付" :
                          refundsInfo.ordersSts == "1" ? "已支付" :
                            refundsInfo.ordersSts == "2" ? "交易成功" :
                              refundsInfo.ordersSts == "3" ? "用户已取消" :
                                refundsInfo.ordersSts == "4" ? "退款中" :
                                  refundsInfo.ordersSts == "5" ? "已退款" :
                                    refundsInfo.ordersSts == "6" ? "交易关闭" :
                                      refundsInfo.ordersSts == "7" ? "已退货"
                                        : null : null
                      }</div>
                    </div>
                    <div className={styles.item}>
                      <div className={styles.label}>退货快递公司</div>

                      {this.state.buttonStatus == 3 ?
                        (this.props.form.getFieldDecorator('expressName', {
                          rules: [{ required: true, message: '请输入退货快递公司' }],
                          initialValue: refundsInfo ? refundsInfo.expressName : null,
                        })(

                          <Input maxLength="16" placeholder="请输入快递公司" style={{ width: '77.7777%', height: '98%' }} />
                        )) :
                        <div className={styles.valueStyle}>{refundsInfo ? refundsInfo.expressName : null}</div>
                      }
                    </div>
                  </div>

                  <div className={styles.row}>
                    <div className={styles.item}>
                      <div className={styles.label}>退货时间</div>
                      <div className={styles.valueStyle}>{refundsInfo ? refundsInfo.returnTime : null}</div>
                    </div>
                    <div className={styles.item}>
                      <div className={styles.label}>退货单号</div>

                      {this.state.buttonStatus == 3 ?
                        (this.props.form.getFieldDecorator('expressCode', {
                          rules: [{ required: true, message: '请输入退货单号' }],
                          initialValue: refundsInfo ? refundsInfo.expressCode : null,
                        })(
                          <Input maxLength="16" placeholder="请输入退货单号" style={{ width: '77.7777%', height: '98%' }} />
                        )) :
                        <div className={styles.valueStyle}>{refundsInfo ? refundsInfo.expressCode : null}</div>
                      }
                    </div>
                  </div>

                  <div className={styles.row}>
                    <div className={styles.item}>
                      <div className={styles.label}>退款状态</div>
                      <div className={styles.valueStyle}>{refundsInfo ? refundsInfo.refundSts == "0" ? '退款中'  : refundsInfo.refundSts == "1" ? '已退款' : null : null}</div>
                    </div>
                    <div className={styles.item}>
                      <div className={styles.label}>退款金额</div>

                      {this.state.buttonStatus == 4 ?
                        (this.props.form.getFieldDecorator('refundFee', {
                          rules: [{ required: true, message: '请输入退款金额' }],
                          initialValue: refundsInfo ? refundsInfo.refundFee : null,
                        })(
                          <InputNumber placeholder="请输入退款金额" style={{ width: '100%' }} style={{ width: '77.7777%' }} />
                        )) :
                        <div className={styles.valueStyle}>{refundsInfo ? refundsInfo.refundFee : null}</div>
                      }
                    </div>
                  </div>

                  <div className={styles.row}>
                    <div className={styles.item}>
                      <div className={styles.label}>退款时间</div>
                      <div className={styles.valueStyle}>{refundsInfo ? refundsInfo.refundTime : null}</div>
                    </div>
                    <div className={styles.item}>
                      <div className={styles.label}></div>
                      <div className={styles.valueStyle}></div>
                    </div>
                  </div>

                </div>
              </Card>

              <Card title="客服备注">
                <div className={styles.table}>
                  <div className={styles.row}>
                    {this.state.buttonStatus == 1 ?
                      (this.props.form.getFieldDecorator('ordersRemark', {
                        initialValue: baseInfo ? baseInfo.ordersRemark : null,
                      })(
                        <TextArea maxLength="200" placeholder="请输入客服备注，最多200字" />
                      )) :
                      <div className={[styles.valueStyle, { justifyContent: "flex-start" }]}>{baseInfo ? baseInfo.ordersRemark : null}</div>
                    }
                  </div>
                </div>
              </Card>
              <Card>
                {this.state.buttonStatus == 0 ?
                  <div className={styles.buttonView}>
                    <Button type="primary" onClick={() => this.setState({ buttonStatus: 1 })}>修改备注</Button>
                    <Button type="primary" disabled={(baseInfo && baseInfo.ordersSts != "0") ? false : true} className={styles.button} onClick={() => this.setState({ buttonStatus: 2 })}>{baseInfo.ordersSts == '2' || (baseInfo.ordersSts == '0') ? '发货' : '修改发货'}</Button>
                    <Button type="primary" disabled={(baseInfo && baseInfo.ordersSts == "2") ? false : true} className={styles.button} onClick={() => this.setState({ buttonStatus: 3 })}>发起退货</Button>
                    <Button type="primary" disabled={(refundsInfo && refundsInfo.ordersSts == "7") ? false : true} className={styles.button} onClick={() => this.setState({ buttonStatus: 4 })}>发起退款</Button>
                    <Popconfirm title="你确定要对订单执行关闭交易操作吗？" placement="bottom" onConfirm={() => this._closeOrder()} onCancel={() => { }} okText="确定" cancelText="取消">
                      <Button type="primary" disabled={(baseInfo && baseInfo.ordersSts == "0") ? false : true} className={styles.button} >关闭交易</Button>
                    </Popconfirm>

                  </div>
                  :
                  <div className={styles.buttonView}>
                    <Button type="primary" className={styles.button} onClick={() => this._save()} loading={this.props.loading}>保存</Button>
                    <Button type="danger" className={styles.button} onClick={() => this._cancel()}>取消</Button>
                  </div>
                }
              </Card>
            </div>
          }



        </PageHeaderLayout>
      </Form>
    );
  }
}
